<template>
  <div class="systemnotification-page page-main">
    <a-tabs v-model:activeKey="searchParams.currentTab" @tab-click="changeTab">
      <a-tab-pane
        v-for="item in PLATFORM_TYPE"
        :key="item.value"
        :tab="item.label"
      />
    </a-tabs>

    <search-form :model="searchParams" @search="search">
      <a-form-item label="名称" name="prop">
        <a-input v-model:value="searchParams.prop" placeholder="请输入" />
      </a-form-item>
    </search-form>

    <div class="table-toolbar">
      <add-button @click="add()" />
    </div>
    <g-table
      ref="tableRef"
      :columns="columns"
      :api="getPageList"
      :params="searchParams"
    />

    <systemnotificationDetail
      v-model:visible="visible"
      :data="activeRow"
      @change="search(false)"
    />
  </div>
</template>

<script setup lang="tsx">
import {
  systemnotificationDel,
  notificationWechat,
  notificationRoutine,
  notificationSms,
  getPageList,
} from "./api";
import type { Isystemnotification } from "./entity";
import systemnotificationDetail from "./detail.vue";
import { PLATFORM_TYPE } from "@/utils/constant";

const searchParams = reactive({
  prop: "",
  currentTab: "1",
});

let visible = $ref(false);
function changeTab() {
  search(false);
}
const { tableRef, columns, search } = useTable<Isystemnotification>([
  { title: "通知类型", dataIndex: "type" },
  { title: "通知场景说明", dataIndex: "description" },
  { title: "标识", dataIndex: "mark" },

  {
    title: "公众号模板",
    dataIndex: "isWechat",
    customRender: ({ record }) => (
      <a-switch
        onClick={() => changeWechat(record)}
        v-model:checked={record.isWechat}
        inline-prompt
        checkedValue={1}
        unCheckedValue={2}
        checkedChildren="开启"
        unCheckedChildren="关闭"
      />
    ),
  },
  {
    title: "小程序订阅消息",
    dataIndex: "isRoutine",
    customRender: ({ record }) => (
      <a-switch
        onClick={() => changeRoutine(record)}
        v-model:checked={record.isRoutine}
        inline-prompt
        checkedValue={1}
        unCheckedValue={2}
        checkedChildren="开启"
        unCheckedChildren="关闭"
      />
    ),
  },
  {
    title: "发送短信",
    dataIndex: "isSms",
    customRender: ({ record }) => (
      <a-switch
        onClick={() => changeSms(record)}
        v-model:checked={record.isRoutine}
        inline-prompt
        checkedValue={1}
        unCheckedValue={2}
        checkedChildren="开启"
        unCheckedChildren="关闭"
      />
    ),
  },
  {
    title: "操作",
    dataIndex: "op",
    customRender: ({ record }) => (
      <>
        <table-button onClick={() => add(record)}>详情</table-button>
      </>
    ),
  },
]);

let activeRow = $ref<Partial<Isystemnotification>>({});
function add(row: Partial<Isystemnotification> = {}) {
  activeRow = { ...row };
  visible = true;
}
const changeWechat = async (data: any) => {
  await notificationWechat(data.id);
  AntMessage.success("修改成功");
};
const changeRoutine = async (data: any) => {
  await notificationRoutine(data.id);
  AntMessage.success("修改成功");
};
const changeSms = async (data: any) => {
  await notificationSms(data.id);
  AntMessage.success("修改成功");
};
function remove({ id }: Isystemnotification) {
  systemnotificationDel(id as number).then(() => {
    AntMessage.success("已删除");
    search(false);
  });
}
</script>

<style lang="scss"></style>
